<template>
<div class="admin-list">
	<Form :model="formItem" ref="formItem" :inline="true" action="javascript:void(0)">
		<FormItem>
			<Input v-model="formItem.key" placeholder="输入关键词查找..."></Input>
		</FormItem>
		<FormItem>
			<Button type="primary" @click="renderTable()">查找</Button>
		</FormItem>
	</Form>
	<!-- 批量操作 -->
	<div class="action-btn">
		<Button size="small" @click="removeMultiple()" style="margin-right: 8px" type="error">批量删除</Button>
		<Button size="small" @click="showCreate()" type="success">添加管理员</Button>
	</div>
	<Table border :columns="tableColumn" ref="adminList" :data="dataList" @on-selection-change="changeData($event)" :loading="dataLoading">
		<template #status="{ row }">
			<i-switch :true-value="1" :false-value="0" v-model="row.status" size="large" @on-change="changeStatus(row.id,$event)"></i-switch>
		</template>
		<template #action="{ row,index }">
			<Button type="success" size="small" style="margin-right: 5px;float:left" @click="showEditInfo(row.id)">修改</Button>
			<Button type="warning" size="small" style="margin-right: 5px;float:left" @click="showEditPwd(row.id)">改密码</Button>
			<Button type="error" size="small" @click="removeDetail(index,row.id)">删除</Button>
		</template>
	</Table>
	<!-- 分页 -->
	<div class="table-page">
		<Page size="small" ref="listPage" :total="pages.total" :model-value="pages.current" :page-size="pages.size" show-elevator show-total @on-change="changePage"></Page>
	</div>
	<!-- 添加的弹出 -->
	<!-- 需要全屏时添加这句 :mask="false" class-name="idw100" -->
	<Drawer :closable="false" :mask-closable="false" :scrollable="true" title="添加管理员" width="640" v-model="showCreateStatus">
		<Spin size="large" fix v-if="loading"></Spin>
		<Form :label-width="80" :model="adminInfo" ref="adminCreateValidate" :rules="adminCreateValidate" action="javascript:void(0)">
			<FormItem label="部门">
				<Select v-model="adminInfo.departmentIds" multiple style="width:260px">
					<Option v-for="item in departmentList" :value="item.id" :key="item.id">{{ item.name }}</Option>
				</Select>
			</FormItem>
			<FormItem label="角色">
				<Select v-model="adminInfo.roleIds" multiple style="width:260px">
					<Option v-for="item in roleList" :value="item.id" :key="item.id">{{ item.name }}</Option>
				</Select>
			</FormItem>
			<FormItem label="用户名" prop="name">
				<Input v-model="adminInfo.name" placeholder="输入用户名..."></Input>
			</FormItem>
			<FormItem label="姓名" prop="realname">
				<Input v-model="adminInfo.realname" placeholder="输入姓名..."></Input>
			</FormItem>
			<FormItem label="手机号">
				<Input v-model="adminInfo.phone" placeholder="输入手机号..."></Input>
			</FormItem>
			<FormItem label="邮箱">
				<Input v-model="adminInfo.email" placeholder="输入邮箱..."></Input>
			</FormItem>
			<FormItem label="密码" prop="password">
				<Input v-model="adminInfo.password" type="password" placeholder="输入密码..."></Input>
			</FormItem>
			<FormItem label="确认密码">
				<Input v-model="adminInfo.repassword" type="password" placeholder="确认密码..."></Input>
			</FormItem>
			<FormItem>
				<Button style="margin-right: 8px" @click="showCreateStatus = false">取消</Button>
				<Button type="primary" @click="createAdmin('adminCreateValidate')">提交</Button>
			</FormItem>
		</Form>
	</Drawer>
	<!-- 修改资料 -->
	<Drawer :closable="false" :mask-closable="false" :scrollable="true" title="修改资料" width="640" v-model="showEditInfoStatus">
		<Spin size="large" fix v-if="loading"></Spin>
		<Form :label-width="80" :model="adminInfo" ref="adminEditValidate" :rules="adminEditValidate" action="javascript:void(0)">
			<FormItem label="部门">
				<Select v-model="adminInfo.departmentIds" multiple style="width:260px">
					<Option v-for="item in departmentList" :value="item.id" :key="item.id">{{ item.name }}</Option>
				</Select>
			</FormItem>
			<FormItem label="角色">
				<Select v-model="adminInfo.roleIds" multiple style="width:260px">
					<Option v-for="item in roleList" :value="item.id" :key="item.id">{{ item.name }}</Option>
				</Select>
			</FormItem>
			<FormItem label="用户名" prop="name">
				<Input v-model="adminInfo.name" disabled placeholder="输入用户名..."></Input>
			</FormItem>
			<FormItem label="姓名" prop="realname">
				<Input v-model="adminInfo.realname" placeholder="输入姓名..."></Input>
			</FormItem>
			<FormItem label="手机号">
				<Input v-model="adminInfo.phone" placeholder="输入手机号..."></Input>
			</FormItem>
			<FormItem label="邮箱">
				<Input v-model="adminInfo.email" placeholder="输入邮箱..."></Input>
			</FormItem>
			<FormItem>
				<Button style="margin-right: 8px" @click="showEditInfoStatus = false">取消</Button>
				<Button type="primary" @click="updateAdmin('adminEditValidate')">提交</Button>
			</FormItem>
		</Form>
	</Drawer>
	<!-- 修改密码 -->
	<Drawer :closable="false" :mask-closable="false" :scrollable="true" title="修改资料" width="640" v-model="showEditPwdStatus">
		<Spin size="large" fix v-if="loading"></Spin>
		<Form :label-width="80" :model="adminPwd" ref="adminPasswordValidate" :rules="adminPasswordValidate" action="javascript:void(0)">
			<FormItem label="密码" prop="password">
				<Input v-model="adminPwd.password" type="password" placeholder="输入密码..."></Input>
			</FormItem>
			<FormItem label="确认密码">
				<Input v-model="adminPwd.repassword" type="password" placeholder="确认密码..."></Input>
			</FormItem>
			<FormItem>
				<Button style="margin-right: 8px" @click="showEditPwdStatus = false">取消</Button>
				<Button type="primary" @click="updatePassword('adminPasswordValidate')">提交</Button>
			</FormItem>
		</Form>
	</Drawer>
</div>
</template>

<script>
export default {
	name: 'AdminList',
	data() {
		return {
			loading: false,
			dataLoading: true,
			detailId: 0,
			formItem: {
				'key': ''
			},
			pages: {
				current: 1,
				total: 0,
				size:10
			},
			tableColumn: [
				{
					type: 'selection',
					width: 60,
					align: 'center'
				},
				{
					title: 'Id',
					key: 'id',
					width: 60,
				},
				{
					title: '用户名',
					minWidth: 120,
					key: 'name'
				},
				{
					title: '姓名',
					width: 100,
					key: 'realname'
				},
				{
					title: '电话',
					width: 150,
					key: 'phone'
				},
				{
					title: '邮箱',
					width: 180,
					key: 'email'
				},
				{
					title: '最后登录时间',
					width: 180,
					key: 'lasttime'
				},
				{
					title: '最后登录IP',
					width: 150,
					key: 'lastip'
				},
				{
					title: '状态',
					slot: 'status',
					width: 100
				},
				{
					title: '操作',
					slot: 'action',
					width: 210,
					align: 'left',
				}
			],
			dataList: [],
			roleList: [],
			departmentList: [],
			adminInfo: {
				departmentIds: [],
				roleIds: [],
				name: '',
				realname: '',
				phone: '',
				email: '',
				password: '',
				repassword: ''
			},
			adminPwd: {
				password: '',
				repassword: ''
			},
			showCreateStatus: false,
			showEditInfoStatus: false,
			showEditPwdStatus: false,
			adminCreateValidate: {
				name: [
					{ required: true, message: '用户名必须填写', trigger: 'blur' },
					{ type: 'string', min: 2, max: 15, message: '用户名 3 - 15 位长度', trigger: 'blur' }
				],
				realname: [
					{ required: true, message: '姓名必须填写', trigger: 'blur' },
					{ type: 'string', min: 2, max: 15, message: '姓名 3 - 15 位长度', trigger: 'blur' }
				],
				password: [
					{ required: true, message: '密码必须填写', trigger: 'blur' },
					{ type: 'string', min: 6, max: 15, message: '密码 6 - 15 位长度', trigger: 'blur' }
				]
			},
			adminEditValidate: {
				realname: [
					{ required: true, message: '姓名必须填写', trigger: 'blur' },
					{ type: 'string', min: 2, max: 15, message: '姓名 3 - 15 位长度', trigger: 'blur' }
				]
			},
			adminPasswordValidate: {
				password: [
					{ required: true, message: '密码必须填写', trigger: 'blur' },
					{ type: 'string', min: 6, max: 15, message: '密码 6 - 15 位长度', trigger: 'blur' }
				]
			},
			selectData:[],
		}
	},
	created() {
		// 取数据
		this.getTableList();
		this.getDepartmentRole();
	},
	methods: {
		changePage() {
			this.pages.current = this.$refs['listPage'].currentPage;
			this.getTableList();
		},
		changeData(index) {
			this.selectData = index
		},
		getTableList() {
			var params = this.formItem;
            params.size = this.pages.size;
            params.page = this.pages.current;
            this.dataLoading = true;
			this.$api.admin.list(params).then(res => {
                this.dataList = res.result.list;
                this.pages.total = res.result.count
			}).finally(e=>{
				this.dataLoading = false;
            });
		},
		renderTable() {
            this.pages.currentPage = 1;
            this.getTableList();
        },
		// 获取部门及角色列表
		getDepartmentRole() {
			var params = { page: this.pages.current,size:10000};
			this.$api.role.list(params).then(res => {
                this.roleList = res.result.list;
			});
			this.$api.department.list().then(res => {
                this.departmentList = res.result;
			});
		},
		// 展开添加
		showCreate() {
			this.showCreateStatus = !this.showCreateStatus;
			this.detaiId = 0;
			this.adminInfo = {
				departmentIds: [],
				roleIds: [],
				name: '',
				realname: '',
				phone: '',
				email: '',
				password: '',
				repassword: ''
			};
		},
		// 添加
		createAdmin(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.loading = true;
					this.$api.admin.create(this.adminInfo).then(res => {
                        this.getTableList();
					}).finally(res => {
                        this.showCreateStatus = !this.showCreateStatus;
						this.loading = false;
					});
				} else {
					this.$Message.error('请检查输入的信息是否正确！');
					this.loading = false;
				}
			})
		},
		// 展开修改
		showEditInfo(id) {
			this.detailId = id;
			this.showEditInfoStatus = !this.showEditInfoStatus;
			this.loading = true;
			this.$api.admin.detail({ detailId: id }).then(res => {
                this.adminInfo = res.result;
                this.adminInfo.roleIds = res.result.roleIds;
                this.adminInfo.departmentIds = res.result.departmentIds;
			}).finally(e=>{
                this.loading = false;
            });
		},
		// 展开修改密码
		showEditPwd(id) {
			this.detailId = id;
			this.showEditPwdStatus = !this.showEditPwdStatus;
		},
		// 修改名称
		updateAdmin(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.loading = true;
					let params = {};
					params.id = this.detailId;
					params.realname = this.adminInfo.realname;
					params.phone = this.adminInfo.phone;
					params.email = this.adminInfo.email;
					params.roleIds = this.adminInfo.roleIds;
					params.departmentIds = this.adminInfo.departmentIds;
					this.$api.admin.update(params).then(res => {
                        this.getTableList();
					}).finally(res => {
                        this.showEditInfoStatus = !this.showEditInfoStatus;
						this.loading = false;
					});
				} else {
					this.$Message.error('请检查输入的信息是否正确！');
					this.loading = false;
				}
			})
		},
		// 修改密码
		updatePassword(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.loading = true;
					this.adminPwd.id = this.detailId;
					this.$api.admin.pwd(this.adminPwd).then(res => {}).finally(res => {
                        this.showEditPwdStatus = !this.showEditPwdStatus;
						this.loading = false;
					});
				} else {
					this.$Message.error('请检查输入的信息是否正确！');
					this.loading = false;
				}
			})
		},
		// 删除
		removeDetail(index, id) {
			// 弹出确认框
			this.$Modal.confirm({
				title: '警告',
				content: '<p>此操作不可恢复，三思而后行...</p>',
				onOk: () => {
					this.$api.admin.remove({ detailId: id }).then(res => {
                        this.dataList.splice(index, 1);
					});
				}
			});
		},
		// 批量删除
		removeMultiple() {
			// 弹出确认框
			this.$Modal.confirm({
				title: '警告',
				content: '<p>此操作不可恢复，三思而后行...</p>',
				onOk: () => {
					var ids = [];
					this.selectData.forEach((item) => {
						ids.push(item.id);
					})
					this.$api.admin.removemultiple({ detailIds: ids }).then(res => {
                        this.getTableList();
					});
				}
			});
		},
		// 修改状态
		changeStatus(id, value) {
			this.$api.admin.status({ id: id, status:value }).then(res => {});
		},
	}
}
</script>
